<template>
  <div id="app" class="div1">
    <!-- v-bind绑定 -->
    <a v-bind:href="url1">百度</a><br><br>
    <a :href="url2">超星</a><br><br>
    <a :href="aaurl + bburl">淘宝</a><br><br>


    <!-- v-on:click绑定事件 -->
    <div v-mould="formData" @click="divClick" class="div2">
      <input type="text" class="ip1" v-model="formData.name"><br><br>
      <button type="info" plain @click="empty">重置</button><br><br>

      <!-- 阻止页面跳转 $event 否则不写参数 Vue的属性或者方法都是以$开头-->
      <a @click="prev($event)" href="url1">阻止跳转百度</a><br><br>

      <!-- @click.stop阻止事件冒泡 -->
      <button @click.stop="maopao">触发按钮</button><br><br>

      <!-- 只执行一次 -->
      <button @click.once="maopao">触发按钮</button><br><br>
      <p>
        <input type="text" @keyup.enter="login" value="请输入你的名字">
        <br><br>
        <input type="password" @keydown.enter="login" value="请输入你的密码">
        <br><br>
        <button @keydown.enter="login">登录</button><br><br>
      </p>
    </div>

    <!-- 作业：翻转 -->
    <div id="div2">
      <h3>{{ str }}</h3>
      <button @click="reverseStr">翻转</button>
    </div>




  </div>
</template>

<script>

export default {
  name: 'App',
  data() {
    return {
      url1: 'http://www.baidu.com',
      url2: 'https://mooc1.chaoxing.com/',
      aaurl: 'http://',
      bburl: 'www.taobao.com',
      str: '李昌坤真棒',
      formData: {
        name: '',
      },
    }
  },
  methods: {
    empty() {
      this.formData.name = '';
    },
    prev(event) {
      event.preventDefault();
    },
    divClick() {
      console.log('div触发了')
    },
    maopao() {
      console.log('btn触发了');
    },
    login() {
      alert('登录成功')
    },
    reverseStr() {
      this.str = this.str.split("").reverse().join("");
    },
  },
};
</script>

<style>
body {
  background-color: aliceblue;
  display: flex;
  justify-content: center;
}

.div1 {
  justify-content: center;
}

.div2 {
  background-color: azure;
}
</style>
